
<template>
  <div class="d-flex justify-content-center bg-layout align-items-center h-100">
    <a-affix class="position-absolute adjust-language-position">
      <a-button icon="global"
                @click="setLanguage">
        {{$t("i18n_login_switch_language_label")}}
      </a-button>
    </a-affix>
    <a-form @submit="handleSubmit"
            :autoFormCreate="(form)=>{this.form = form}"
            class="mt-3">
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="nickname"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_register_nickname_valid_label'), whitespace: true } ] }">
        <span slot="label">
          {{$t('i18n_register_nickname_label')}}
          <a-tooltip :title="$t('i18n_register_nickname_tooltip_label')">
            <a-icon type="question-circle-o"
                    class="ml-1" />
          </a-tooltip>
        </span>
        <a-input />
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="password"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_login_user_password_valid_label') }, { validator: this.validateToNextPassword } ] }"
                   :label="$t('i18n_login_user_password_label')">
        <a-input type="password" />
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="confirm"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_register_password_confirm_valid_label') }, { validator: this.compareToFirstPassword } ] }"
                   :label="$t('i18n_register_password_confirm_label')">
        <a-input type="password"
                 @blur="handleConfirmBlur" />
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="email"
                   :fieldDecoratorOptions="{ rules: [ { type: 'email', message: $t('i18n_register_email_valid_fail_label') }, { required: true, message: $t('i18n_register_email_valid_require_label') } ] }"
                   :label="$t('i18n_register_email_label')">
        <a-input />
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="phone"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_register_phone_valid_label') } ] }"
                   :label="$t('i18n_register_phone_label')">
        <a-input class="w-100" />
        <a-select class="width-3"
                  slot="addonBefore">
          <a-select-option value="86">+86</a-select-option>
          <a-select-option value="87">+87</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="residence"
                   :fieldDecoratorOptions="{ initialValue: ['zhejiang', 'hangzhou', 'xihu'], rules: [ { type: 'array', required: true, message: $t('i18n_register_residence_valid_label') } ] }"
                   :label="$t('i18n_register_residence_label')">
        <a-cascader :options="residences" />
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="website"
                   :fieldDecoratorOptions="{ rules: [{ required: true, message: $t('i18n_register_website_valid_label') }] }"
                   :label="$t('i18n_register_website_label')">

        <a-auto-complete @change="handleWebsiteChange">
          <template slot="dataSource">
            <a-auto-complete-option :key="website"
                                    v-for="website in autoCompleteResult">
              {{ website }}
            </a-auto-complete-option>
          </template>
          <a-input />
        </a-auto-complete>
      </a-form-item>
      <a-form-item :wrapperCol="formItemLayout.wrapperCol"
                   :labelCol="formItemLayout.labelCol"
                   fieldDecoratorId="captcha"
                   :fieldDecoratorOptions="{ rules: [ { required: true, message: $t('i18n_register_captcha_valid_label') } ] }">
        <span slot="label">
          {{$t("i18n_register_captcha_label")}}
          <a-tooltip>
            <span slot="title">
              {{$t('i18n_register_captcha_tooltip_label')}}
              <a-icon type="smile-o"
                      class="ml-1" />
            </span>
            <a-icon type="question-circle-o"
                    class="ml-1" />
          </a-tooltip>
        </span>
        <a-row :gutter="8">
          <a-col :span="12">
            <a-input />
          </a-col>
          <a-col :span="12">
            <a-button>{{$t("i18n_register_captcha_btn_label")}}</a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :wrapperCol="tailFormItemLayout.wrapperCol"
                   fieldDecoratorId="agreement"
                   :fieldDecoratorOptions="{ valuePropName: 'checked' }">
        <a-checkbox>
          {{$t("i18n_register_agreement_read_label")}}
          <a href=""
             class="ml-1">{{$t("i18n_register_agreement_label")}}</a>
        </a-checkbox>
      </a-form-item>
      <a-form-item :wrapperCol="tailFormItemLayout.wrapperCol">
        <a-button type="primary"
                  htmlType="submit"
                  class="w-100">
          {{$t("i18n_register_label")}}
        </a-button>
        <router-link to="/login">
          <a-icon type="rollback"
                  class="mr-1" /> {{$t("i18n_register_back_login_label")}}
        </router-link>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>

/**
 * @description Register Component
 */

const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake'
          }
        ]
      }
    ]
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men'
          }
        ]
      }
    ]
  }
]
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
}
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 14,
      offset: 10,
    },
  },
}

export default {
  data() {
    return {
      residences: residences,
      formItemLayout: formItemLayout,
      tailFormItemLayout: tailFormItemLayout,
      autoCompleteResult: []
    }
  },
  computed: {},
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        // TODO: Handle submit
        if (!err) {
          Api.post('register', values, true).then(res => {
            notification.success({
              message: this.$t('i18n_common_success'),
              description: JSON.stringify(res)
            })
            this.$route.push('/login')
          })
        }
      })
    },
    handleConfirmBlur(e) {
      // const value = e.target.value
      // this.setState({ confirmDirty: this.state.confirmDirty || !!value })
    },
    compareToFirstPassword(rule, value, callback) {
      // const form = this.props.form
      // if (value && value !== form.getFieldValue('password')) {
      //   callback('Two passwords that you enter is inconsistent!')
      // } else {
      //   callback()
      // }
    },
    validateToNextPassword(rule, value, callback) {
      // const form = this.props.form
      // if (value && this.state.confirmDirty) {
      //   form.validateFields(['confirm'], { force: true })
      // }
      // callback()
    },
    handleWebsiteChange(value) {
      // let autoCompleteResult
      // if (!value) {
      //   autoCompleteResult = []
      // } else {
      //   autoCompleteResult = ['.com', '.org', '.net'].map(
      //     domain => `${value}${domain}`
      //   )
      // }
      // this.setState({ autoCompleteResult })
    },
    setLanguage() {
      const curLan = localStorage.getItem('vi-lan')
      localStorage.setItem('vi-lan', curLan === 'en' ? 'zh' : 'en')
      // FIXME: will do smooth reload
      window.location.reload()
    },
  }
}

</script>
